<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#app{
				width: 300px;
				height: 320px;
				background-color: gainsboro;
				text-align: center;
				padding-top: 10px;
			}
			.item{
				width: 300px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}
			.item_icon{
				width: 240px;
				height: 100px;
				background-color: white;
				line-height: 30px;
				margin-left: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2>个人信息</h2>
			<div class="item">
				姓名：<input type="text" :value="persion.name">
			</div>
			<div class="item">
				年龄：<input type="number" :value="persion.age">
			</div>
			<div class="item">
				身高：<input type="number" :value="persion.height" :value="persion.height">
			</div>
			<div v-if="persion.height>=180" class="item_icon">
				兄弟呀，再有八块腹肌会更好！
			</div>
			<div v-else-if="persion.height>=170" class="item_icon">
				该用工学习了，不然没对象啦！
			</div>
			<div v-else-if="persion.height>=160" class="item_icon">
				兄弟啊，咱身高一般，但智商高啊！
			</div>
			<div v-else class="item_icon">
				别理他们，咱浓缩的都是精华！
			</div>
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
		<script>
			const Counter ={
				data(){
					return{
						persion:{name:'小明',age:20,height:197}
					}
				}
			}
			Vue.createApp(Counter).mount('#app')
		</script>
</html>
